<template>

	<view class="ts-column ts-flex-item">

		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
				</view>
			</swiper-item>

			<swiper-item>
				<view class="swiper-item">
					<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
				</view>
			</swiper-item>


			<swiper-item>
				<view class="swiper-item">
					<ts-banner class="ts-row ts-flex-item" image="http://via.placeholder.com/750x375" :height="350"></ts-banner>
				</view>
			</swiper-item>

		</swiper>
		<ts-search-bar :keywords="keywords" @search="onSearch"></ts-search-bar>
		<view class="ts-row ts-flex-item">
			<ts-segmented-control class="ts-row ts-flex-item" :values="tabs" styleType="text" @clickItem="onClickItem"></ts-segmented-control>
		</view>


		<view class="ts-column" v-for="(item ,index) in searchResult" :key="index">
			<view class="ts-row ts-padding" style="align-items:flex-start;">
				<view class="">
					<image src="http://via.placeholder.com/80x80" style="width: 100upx; height: 100upx; border-radius: 75upx;"></image>
				</view>
				<view class="ts-section ts-padding-left">
					<view class="ts-section-title">
						<view class="ts-row">
							<view class="ts-flex-item" style="align-items: flex-end;">
								<text class="ts-h2 ts-text-bold">{{item.linkman}}</text>
								<text class="ts-h6 ts-padding-left">{{item.mobile}}</text>
							</view>
							<view style="justify-content: center; align-items: center;">
								<ts-badge :text="item.type" type="error"></ts-badge>
							</view>
						</view>
					</view>
					<view class="ts-section-body">
						<view class="ts-row ts-h2 ts-text-bold">
							<text>{{item.title}}</text>
						</view>
						<view class="ts-row ts-padding-top" style="flex-wrap: wrap;">
							<view class="ts-row ts-padding-right ts-padding-bottom" v-for="(img,idx) in item.images" :key="idx" style="width: 150upx; height: 150upx;">
								<image :src="img" style="width: 100%; height: 100%;"></image>
							</view>
						</view>
						<view class="ts-row ts-ellipsis-3" style="flex-wrap: wrap;">
							{{item.description}}
						</view>
												<ts-line></ts-line>
						<view class="ts-row">
							<view>地址：</view>
							<view>{{item.address}}</view>
						</view>
						<view class="ts-row">
							<view>时间：</view>
							<view>{{item.create_time}}</view>
						</view>
						
					</view>
				</view>
			</view>
			<ts-gap></ts-gap>
		</view>

		<ts-load-more :loadingType="loadingType"></ts-load-more>
		<ts-gap></ts-gap>
	</view>
</template>

<script>
	import * as api from '@/common/api';

	export default {

		data() {
			return {
				currentTab: 0,
				tabs: ['全部', '丢失', '捡到'],
				searchResult: [],
				type: '全部',
				keywords: '',

				page: 0,
				loadingType: 0,
			}
		},
		async onReachBottom() {
			await this.loadMoreSearcheResult();
		},

		async onLoad() {
			await this.loadMoreSearcheResult();
		},
		methods: {
			async onSearch(keywords) {
				this.keywords = keywords;
				await this.doSearch();
			},
			async doSearch() {
				this.page = 0;
				this.loadingType = 0;
				this.searchResult = [];

				let types = ['', '丢失', '捡到'];
				this.type = types[this.currentTab];

				await this.loadMoreSearcheResult();
			},
			async loadMoreSearcheResult() {
				//上拉的状态：0-loading前；1-loading中；2-没有更多了
				if (this.loadingType !== 0) {
					return;
				}
				this.loadingType = 1;
				this.page = this.page + 1;

				let res = await api.event.getList({
					page: this.page,
					key: this.keywords,
					type: this.type === "全部" ? '' : this.type,
					pageSize: 10,
				});

				if (res.errno === 0) {
					const data = res.data;
					if (data && data.data) {
						// console.log(data);
						this.searchResult = this.searchResult.concat(data.data);
					}
					if (data.totalPages === data.currentPage) {
						this.loadingType = 2; //2-没有更多了
					} else {
						this.loadingType = 0; //开启新一轮加载
					}
				} else {
					console.log(res.errmsg);
				}

			},

			async onClickItem(index) {
				if (this.currentTab !== index) {
					this.currentTab = index;
					await this.doSearch();
				}
			}
		}
	}
</script>

<style>
</style>
